<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/animate.css">

    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(40px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
            position: absolute;
        }
        
        .v-move {
            transition: all 1s ease;
        }
    </style>
</head>

<body>
    <div id="app" class="container">

        <div class="row">
            <div class="form-group form-inline">
                <label for="idInput">id:</label>
                <input type="text" class="form-control" id="idInput" placeholder="id" v-model="id">
                <label for="bookNameInput">book name:</label>
                <input type="text" class="form-control" id="bookNameInput" placeholder="bookName" v-model="bookname">
                <label for="priceInput">price:</label>
                <input type="text" class="form-control" id="priceInput" placeholder="price" v-model="price">
                <label for="authorInput">author:</label>
                <input type="text" class="form-control" id="authorInput" placeholder="author" v-model="author">
                <button class="btn btn-primary" @click="addBook">添加</button>
            </div>
        </div>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>bookname</th>
                    <th>price</th>
                    <th>author</th>
                </tr>
            </thead>
            <!-- 当在table中使用transition-group，我们只需在tbody中添加 is="transition-group"属性即可，
                如果使用<transition-group>标签包裹v-for，则无法得到渲染出来的动画效果，是因为 这个 
                    <transition-group> 组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。 -->
            <!-- 给transition-group添加appear属性实现页面刚展示时的入场效果 -->
            <!-- tag属性：可以指定transition-group渲染为指定的元素，如果不指定tag元素，则默认渲染为span标签 -->
            <tbody is="transition-group">
                <tr v-for="book in bookList" :key="book.id" @click="delBook(book.id)">
                    <td>{{book.id}}</td>
                    <td>{{book.bookname}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.author}}</td>
                </tr>
            </tbody>
            <!-- <tbody>
                <transition-group>
                    <tr v-for="book in bookList" :key="book.id" @click="delBook(book.id)">
                        <td>{{book.id}}</td>
                        <td>{{book.bookname}}</td>
                        <td>{{book.price}}</td>
                        <td>{{book.author}}</td>
                    </tr>
                </transition-group>
            </tbody> -->
        </table>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                bookname: '',
                price: '',
                author: '',
                bookList: [{
                    id: '1122521',
                    bookname: "许三观卖血记",
                    price: "39.26",
                    author: "余华"
                }, {
                    id: '1122522',
                    bookname: "活着",
                    price: "42.26",
                    author: "余华"
                }, {
                    id: '1122523',
                    bookname: "围城",
                    price: "28.99",
                    author: "沈从文"
                }, {
                    id: '1122524',
                    bookname: "骆驼祥子",
                    price: "35.00",
                    author: "鲁迅"
                }, {
                    id: '1122525',
                    bookname: "三国演义",
                    price: "89.79",
                    author: "罗贯中"
                }]
            },
            methods: {
                addBook() {
                    this.bookList.push({
                        id: this.id,
                        bookname: this.bookname,
                        price: this.price,
                        author: this.author
                    });
                    this.id = '';
                    this.bookname = '';
                    this.price = '';
                    this.author = '';
                },
                delBook(id) {
                    var index = this.bookList.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    });
                    this.bookList.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>